<template>
  <div>
    <el-page-header
      :title="$t('common.back')"
      :content="$t('modules.report.statement_detail')"
      style="margin-bottom: 20px"
      @back="back"
    />
    <div
      v-loading.fullscreen.lock="loading"
      style="display: flex; margin-top: 10px"
    >
      <div
        class="left"
        style="display: inline-block; width: 75%; margin-right: 1%"
      >
        <el-card style="margin-bottom: 10px" shadow="never">
          <div class="reportSpan">
            <div class="reportSpanItem">
              {{ $t('modules.invoice.amount') }}:
              <el-tag style="margin-left: 10px" size="small" type="warning">{{
                Number(totalAmount).toLocaleString()
              }}</el-tag>
            </div>
            <div class="reportSpanItem">
              {{ $t('common.month') }}:<el-tag
                style="margin-left: 10px"
                size="small"
              >
                {{ statisticMonth }}</el-tag
              >
            </div>
            <div class="reportSpanItem">
              {{ $t('common.customer_name') }}:
              <el-tag style="margin-left: 10px" size="small">{{
                userName
              }}</el-tag>
            </div>
            <!--            <div style="display:inline-block;width:400px;">{{ $t('modules.report.notify_oa_time') }}: <el-tag-->
            <!--              style="margin-left:10px"-->
            <!--              size="small"-->
            <!--            >{{ noticeOaTime }}</el-tag></div>-->
            <!-- <el-button v-if="confirmState===3" style="margin-left:50px" type="primary" size="small" @click="getRejectReasonVisible=true">Reject Reason</el-button> -->
          </div>
        </el-card>
        <div>
          <!-- 详情 -->
          <div
            v-for="platItem in platList"
            :key="platItem.platCode"
            class="ulItem"
            style="width: 100%"
          >
            <el-card shadow="never">
              <template #header>
                <div class="platItem">
                  {{ $t('contract_plat.' + platItem.platCode) }}
                  <span style="float: right">
                    {{ '$' + getSubTotal(platItem) }}</span
                  >
                </div></template
              >
              <div
                v-for="statementDetail in platItem.statisticMethodList"
                :key="statementDetail.billingServiceCode"
                class="statisItem"
              >
                <el-row>
                  <el-col :xs="10" :sm="10" :md="10" :lg="10" :xl="10">
                    <div
                      class="serviceName"
                      style="display: inline-block; cursor: pointer"
                      @click="showSettlementDetail(statementDetail)"
                    >
                      {{
                        $t(
                          'flycare.billing_service.' +
                            statementDetail.billingServiceCode +
                            '.name'
                        )
                      }}
                      <!--                      <span style="margin-left:50px;">{{ billingService.statisticCount }}</span>-->
                    </div>
                  </el-col>
                  <!--                  <el-col :xs="5" :sm="3" :md="3" :lg="3" :xl="3" style="text-align:center;">-->
                  <!--                    <div style="display:inline-block;">{{ $t('modules.contract.price') }}:{{ billingService.price }}-->
                  <!--                    </div>-->
                  <!--                  </el-col>-->
                  <!--                  <el-col :xs="5" :sm="3" :md="3" :lg="3" :xl="3" style="text-align:center;">-->
                  <!--                    <div style="display:inline-block;">{{ $t('modules.contract.free_count') }}:{{-->
                  <!--                      billingService.freeCount-->
                  <!--                    }}</div>-->
                  <!--                  </el-col>-->
                  <el-col
                    :xs="6"
                    :sm="6"
                    :md="6"
                    :lg="6"
                    :xl="6"
                    style="text-align: center"
                  >
                    <div style="display: inline-block">
                      {{ $t('modules.invoice.amount') }}:{{
                        Number(
                          statementDetail.statisticMethodAmount
                        ).toLocaleString()
                      }}
                    </div>
                  </el-col>
                  <!--                  <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6"  style="text-align:center;">-->
                  <!--                    <div style="display:inline-block;">{{ $t('common.remark') }}:{{-->
                  <!--                      statementDetail.remark-->
                  <!--                      }}</div>-->
                  <!--                  </el-col>-->
                  <!--                  <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2" style="text-align:center;">-->
                  <!--                    <div class="operateIcon" @click="showSettlementDetail(statementDetail)">-->
                  <!--                      <i-->
                  <!--                        class="el-icon-info"-->
                  <!--                        style="margin-top: 10px; margin-right: 15px;cursor: pointer"-->
                  <!--                      />-->
                  <!--                    </div>-->
                  <!--                  </el-col>-->
                </el-row>
              </div>
            </el-card>
          </div>
        </div>
      </div>
    </div>
    <el-drawer
      :title="
        $t(
          'flycare.billing_service.' +
            billingService.billingServiceCode +
            '.name'
        )
      "
      v-model="drawerVisible"
      :direction="'rtl'"
    >
      <div v-for="data in drawerData" :key="data.contractNum">
        <el-descriptions
          :column="1"
          style="padding: 10px"
          :label-style="{ width: '150px' }"
          border
        >
          <el-descriptions-item :label="$t('modules.contract.contract_no')">
            {{ data.contractNum }}
          </el-descriptions-item>
          <el-descriptions-item
            v-if="showDescItem('usedQuantity')"
            :label="'Used Quantity'"
          >
            {{ Number(data.statisticCount).toLocaleString() }}
          </el-descriptions-item>
          <el-descriptions-item
            v-if="showDescItem('price')"
            :label="$t('modules.contract.price')"
          >
            {{
              Number(data.price).toLocaleString() +
              ' ' +
              $t(
                'flycare.billing_service.' +
                  billingService.billingServiceCode +
                  '.price_unit'
              )
            }}
          </el-descriptions-item>
          <el-descriptions-item
            v-if="showDescItem('freeNum')"
            :label="$t('modules.contract.free_count')"
          >
            {{ Number(data.freeCount).toLocaleString() }}
          </el-descriptions-item>
          <el-descriptions-item
            v-if="showDescItem('freeExpireTime')"
            :label="$t('modules.contract.free_expire_time')"
          >
            {{ formatTime(data.freeExpireTime) }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('modules.invoice.amount')">
            {{ Number(data.statementAmount).toLocaleString() }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('modules.report.notify_oa_time')">
            {{ formatTime(data.notifyOaTime) }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('modules.invoice.paid_status')">
            {{
              data.billId
                ? $t('modules.invoice.paid')
                : $t('modules.invoice.unpaid')
            }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('common.remark')">
            {{ data.remark }}
          </el-descriptions-item>
        </el-descriptions>
        <el-divider></el-divider>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { getPIDetail } from '@/api/statement'
import { toTime } from '@/utils/index'
export default {
  components: {},
  data() {
    return {
      loading: false,
      statisticMonth: '',
      userName: '',
      platList: [],
      noticeOaTime: '',
      endTime: '',
      totalAmount: '',
      detail: {},
      drawerVisible: false,
      drawerData: {},
      billingService: {}
    }
  },
  mounted() {
    this.detail = JSON.parse(this.$route.query.piDetail)
    this.getReportDetails()
  },
  activated() {
    // this.getReportHistory()
  },
  methods: {
    // 返回
    back() {
      this.$router.back()
    },
    getSubTotal(platCost) {
      let amount = 0
      platCost.statisticMethodList.forEach((item) => {
        amount += item.statisticMethodAmount
      })
      return Number(amount).toLocaleString()
    },
    showDescItem(itemName) {
      if (this.billingService) {
        if (itemName === 'price') {
          return this.billingService.billingType === 'MONTH'
        }
        if (itemName === 'freeNum') {
          return this.billingService.allowFree === 1
        }
        if (itemName === 'usedQuantity') {
          return this.billingService.statisticMethodCode !== null
        }
        if (itemName === 'freeExpireTime') {
          return this.billingService.allowFree === 1
        }
      } else {
        return true
      }
    },
    formatServiceUnit() {
      if (this.billingService) {
        return this.$t(
          'flycare.billing_service_unit.' +
            this.billingService.serviceAmountUnit
        )
      } else {
        return 'USD'
      }
    },
    // 获取report详情
    getReportDetails() {
      this.loading = true
      const param = {
        characterCode: this.detail.characterCode,
        keyId: this.detail.keyId,
        statisticMonth: this.detail.statisticMonth
      }
      getPIDetail(param)
        .then((res) => {
          this.platList = res.platList
          this.statisticMonth = res.statisticMonth
          this.userName = res.userName
          this.totalAmount = res.totalAmount.toFixed(2)
          if (res.noticeOaTime != null) {
            this.noticeOaTime = toTime(parseInt(res.noticeOaTime)).toString()
          } else {
            this.noticeOaTime = 'Not sent notificatioin to OA so far'
          }
          this.platList = res.platList
          this.loading = false
        })
        .catch((err) => {
          this.$message.error(err.message)
          this.loading = false
        })
    },
    formatTime(timestamp) {
      if (timestamp) {
        return toTime(parseInt(timestamp)).toString()
      } else {
        return ''
      }
    },
    showSettlementDetail(statementDetail) {
      console.log(statementDetail)
      this.billingService = statementDetail.billingService
      this.drawerData = statementDetail.statementStatDetailVos
      this.drawerVisible = true
    }
  }
}
</script>

<style scoped lang="scss">
.platItem {
  height: 20px;
  font-size: 20px;
  line-height: 20px;
  font-weight: 700;
  text-indent: 10px;
}

.reportSpan {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.reportSpanItem {
  display: inline-block;
  // width:250px;
  margin-right: 50px;
}
.left {
  flex: 1;
  overflow: hidden;
}

.right {
  width: 280px;
  // height:calc(100vh - 200px);
  height: 100%;
  position: sticky;
  // position:absolute;
  top: 100px;
  // overflow-y: auto;
}

.arrowIcon {
  float: right;
  font-size: 18px;
}
.ulItem {
  display: inline-block;
  background-color: #ffffff;
}
.statisItem {
  height: 80px;
  line-height: 80px;
  display: block;
  margin-left: 30px;
  font-size: 16px;
  color: #9c9c9c;
  font-weight: 400;
}
.organization {
  /* display:none; */
  border-top: 1px solid #e4e7ed;
}
.serviceName {
  display: inline-block;
  cursor: pointer;
}
.serviceName:hover {
  color: #00c9a7;
  text-decoration: underline;
}
</style>

<style lang="scss">
.ulItem .el-card__body {
  padding: 0px;
}
</style>

